<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.box {
				width: 50px;
				height: 50px;
				display: inline-block;
				text-align: center;
				line-height: 50px;
				color: #eee;
				transition: 0.2s;
			}

			#box1:hover {
				transform: translate(20px, 20px);
			}

			#box2:hover {
				transform: rotate(30deg);
			}

			#box3:hover {
				transform: scale(1.5, 1.2);
			}

			#box4:hover {
				transform: skew(30deg, 30deg);
			}

			#demo1 {
				display: inline-block;
				width: 80px;
				height: 80px;
				background-color: pink;
				position: relative;
			}

			.inner {
				height: 100%;
				background-color: blue;
			}

			.fade-in {
				opacity: 1;
				transition: opacity 1s;
			}

			.fade-out {
				opacity: 0;
				transition: opacity 1s;
			}

			#demo1 .inner {
				opacity: 0;
				transition: opacity 1s;
			}

			#demo1 .inner:hover {
				opacity: 1;
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>过渡 - transition</h3>
					<ul class="d-list">
						<li>Transition 用于从一种样式状态平滑过渡到另一种状态，产生动画效果</li>
						<li>可以改变大多数样式，包括颜色、尺寸、位置、透明、边框圆角等</li>
						<li>不用于 display, visibility; 在元素或父元素被隐藏时不生效</li>
						<li>包含4个子属性, transition-property, transition-duration, transtion-timing-function,
							transition-delay</li>
						<li>transition-property: 待执行过渡效果的样式属性，如 width, height</li>
						<li>transition-duration: 过渡时间，单位为秒(s)或毫秒(ms), 如 0.5s, 500ms</li>
						<li>transtion-timing-function: 变化速度曲线。包含 linear(线性), ease(慢-快-慢), ease-in(慢-快), ease-out(快-慢),
							ease-in-out(慢-快-慢)，和贝兹尔曲线</li>
						<li>贝兹尔曲线: cubic-bezier(0.1,1.0,0.5,0.1)</li>
						<li>transition-delay: 过渡前延迟时间</li>
						<li>transition 是以上4属性的简写，依次按property,duration,timing-function,delay顺序，如width 0.5s ease 0.1s</li>
						<li><a target="_blank"
								href="https://blog.csdn.net/qq_32594913/article/details/135915376">Transition 过渡</a>
						</li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>变换 - transform</h3>
					<ul>
						<li>transform 用于对元素进行坐标变换，实现平移、缩放、旋转、斜切效果</li>
						<li>语法：transform: 函数()</li>
						<li>可用函数， 平移: translate(x,y), 缩放: scale(x,y), 旋转: rotate(deg), 斜切: skew(), 矩阵运算: matrix()</li>
						<li><a target="_blank"
								href="https://blog.csdn.net/weixin_44116302/article/details/122612261">矩阵变换</a></li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<section>
					<h3>2D变换</h3>
					<section>
						<b id="box1" class="box bg-red">平移</b>
						<b id="box2" class="box bg-blue">旋转</b>
						<b id="box3" class="box bg-green">缩放</b>
						<b id="box4" class="box bg-orange">透视</b>
					</section>
				</section>
				<section>
					<h3>淡入淡出</h3>
					<div id="demo1">
						<div class="inner"></div>
					</div>
				</section>
			</div>
		</div>
	</body>
</html>
